<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <link rel="stylesheet" href="../css/element-ui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.js"></script>
    <script src="../js/app.js"></script>
</head>
<body>
<div id="app">
    <h3>个人中心</h3>
    <input type="file" id="videoInput" accept="video/*">
    <button onclick="uploadVideo()">Upload Video</button>
    <video id="videoPlayer" width="640" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {}
        },
        methods: {}
    });

    function uploadVideo() {
        const videoInput = document.getElementById('videoInput');
        const file = videoInput.files[0];

        if (file) {
            const formData = new FormData();
            formData.append('video', file);

            fetch('/upload', { // 后端上传接口
                method: 'POST',
                body: formData,
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Video uploaded successfully');
                    const videoPlayer = document.getElementById('videoPlayer');
                    videoPlayer.src = data.videoUrl; // 确保这里使用的是正确的视频URL
                    videoPlayer.load(); // 重新加载视频
                })
                .catch(error => {
                    console.error('Error uploading video:', error);
                });
        } else {
            alert('Please select a video file.');
        }
    }

    document.getElementById('videoPlayer').addEventListener('error', function(e) {
        console.error('Video error:', e);
    });
</script>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 90vh;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
</body>
</html>